<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 动画库 -->
    <link rel="stylesheet" href="css/animate.min.css">

    <!-- bootstrap 核心css -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- swiper css -->
    <link rel="stylesheet" href="css/swiper-bundle.min.css">

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="css/reset.less">

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="css/common.less">

    <!-- 当前页面 -->
    <link rel="stylesheet/less" href="css/list.less">
</head>

<body>
    <header id="header">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid warp">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <!-- 如果当前是移动端时的导航按钮 -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- logo -->
                    <a class="navbar-brand" href="./index.html">首页</a>
                </div>

                <!-- 导航条 -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                    <!-- 右边内容 -->
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">产品中心</a></li>
                        <li><a href="#">经典案例</a></li>
                        <li><a href="#">我们的优势</a></li>
                        <li><a href="#">新闻资讯</a></li>
                        <li><a href="./author.html">关于我们</a></li>
                        <li><a href="#">联系我们</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </header>
    <div id="list">
        <div class="work-nav">
            <nav class="navbar">
                <div class="container-fluid warp">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <!-- 如果当前是移动端时的导航按钮 -->
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <!-- logo -->
                        <a class="navbar-brand" href="#">优质房源</a>
                    </div>

                    <!-- 导航条 -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">

                        <!-- 右边内容 -->
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#">全部</a></li>
                            <li class="line3"></li>
                            <li><a href="#">简约</a></li>
                            <li class="line3"></li>
                            <li><a href="#">浓厚</a></li>
                            <li class="line3"></li>
                            <li><a href="#">温馨</a></li>

                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>
        </div>
        <div class="tu">
            <a href="./detail.html"><img src="./images/box31.png" alt=""></a>
            <a href="./detail.html"><img src="./images/box31.png" alt=""></a>
            <a href="./detail.html"><img src="./images/box31.png" alt=""></a>
            <a href="./detail.html"><img src="./images/box31.png" alt=""></a>
            <a href="./detail.html"><img src="./images/box31.png" alt=""></a>
            <a href="./detail.html"><img src="./images/box31.png" alt=""></a>
            <a href="./detail.html"><img src="./images/box31.png" alt=""></a>
            <a href="./detail.html"><img src="./images/box31.png" alt=""></a>
        </div>
    </div>
    <footer id="footer">
        <div class="footer">
            <div class="footer-box">
                <ul>
                    <li>产品中心</li>
                    <li>轻奢系列</li>
                    <li>产品中心</li>
                    <li>轻奢系列</li>
                    <li>产品中心</li>
                    <li>轻奢系列</li>
                    <li>轻奢系列</li>
                </ul>
                <ul>
                    <li>新闻资讯</li>
                    <li>轻奢系列</li>
                    <li>产品中心</li>
                    <li>轻奢系列</li>
                </ul>
                <ul>
                    <li>关于我们</li>
                    <li>轻奢系列</li>
                    <li>产品中心</li>
                    <li>轻奢系列</li>
                    <li>轻奢系列</li>
                </ul>
                <ul>
                    <li>[扫码关注微信号]</li>
                    <li><img src="./images/ma.png" alt=""></li>
                </ul>
                <ul>
                    <li>[扫码关注公众号]</li>
                    <li><img src="./images/ma.png" alt=""></li>
                </ul>
            </div>
        </div>
    </footer>
</body>

</html>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/swiper-bundle.min.js"></script>
<script src="js/wow.min.repeat.js"></script>
<script src="js/less.js"></script>
<script>
    new WOW().init();
    var teamSwiper = new Swiper('.team-swiper', {
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },
    });
    // 锚点跳转滑动效果 
    $('#bs-example-navbar-collapse-1 a[href],#banner a[href],#up a[href]').click(function () {
        // location.pathname 返回当前URL的路径名(不包含域名)
        // console.log(location.pathname) 系统的路径
        // console.log(location.pathname.replace(/^\//,''))
        // console.log(this.pathname.replace(/^\//, ''))  当前元素所跳转链接替换后的路径
        // console.log(location.hostname)  //系统获取域名部分
        // console.log(this.hostname)  //当前元素所跳转链接的域名部分

        /* 
            replace(需要搜索字符,替换内容)
        */
        // console.log(this.hostname)

        //判断你跳转的链接 是不是在当前界面
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            //获取将要跳转的锚点位置
            var $target = $(this.hash);
            // 逻辑短路 #about name=about
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');

            //一定要当他找到锚点元素的时候，才跳转锚点
            if ($target.length) {
                //获取目标元素的位置
                var targetOffset = $target.offset().top + 10;

                //让页面的body和html 滚动到 targetOffset这个位置
                $('html,body').animate({
                    scrollTop: targetOffset
                }, 1000);
            }
        }
    });
</script>